<script lang="ts" setup>
import Episode from './Episode.vue'
import type { IChapter } from '@/typings/interface'

const { expand: _expand } = defineProps<{
  play?: boolean
  index: number
  expand: boolean
  chapter: IChapter
}>()

const expand = $ref(_expand)
</script>

<template>
  <view class="mb-3.75">
    <view wfull bg="#D7D7D7 opacity-10">
      <view text="22 #333333" class="b b-#d7d7d7 b-opacity-35 px-2.5 py-1 between" @click="expand = !expand">
        <text truncate>
          第 {{ index + 1 }} 章 - {{ chapter.title }}
        </text>
        <image class="w-20 h-12" src="@/static/images/icons/video/detail/arrow_up.svg"
          :style="{ transform: `rotate(${expand ? '0' : '180deg'})` }" />
      </view>
    </view>
    <view v-show="expand" bg-white class="b-b b-#d7d7d7 b-l b-r b-opacity-35" py-2.2 px-6>
      <Episode v-for="(episode, idx) in chapter.episodeList" :key="episode.id" :play="play" :episode="episode"
        :chapter="chapter" class="last-mb-0 mb-2" :index="idx" />
    </view>
  </view>
</template>

<style lang="scss" scoped></style>